import Taro from '@tarojs/taro';
import PdsField from '@/components/common/pds_field';
import { View, Button } from '@tarojs/components';
import * as React from 'react';
import './index.scss'
import PdsFormPicker from '@/components/common/pds_form_picker';
import { setWalletPersonalOtherInfo, submitPersonalOtherInfo } from '@/services/api/eligible_investors';
import { getPersonalCertiInfo, getPersonalOtherInfo } from '@/services/api/user';
import { findMapsByFieldName } from '@/services/api/common';
import { Toast } from '@antmjs/vantui';

interface InformationTableProps {

}


class InformationTable extends React.Component<InformationTableProps, any> {

    state = {
        name: null,
        credCode: null,
        phone: null,
        contact_addr: null,
        profession: null,
        duties: null,
        fixed_telephone: null,
        zip_code: null,
        email_address: null,
        isRead: false,
    }

    constructor(props) {
        super(props);
    }


    // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
    // 而不是频繁地调用此 API
    $instance = Taro.getCurrentInstance()

    componentWillMount() {
        const params = this.$instance.router?.params
        console.log(params);
        if (params) {
            if (params['investConfirmAuthStatus'] === '2') {
                // 仅查看
                this.setState({ isRead: true })
            }
            //
            this.requestPersonalCertiInfo()
            if (params['isJG'] === '1') {
                this.requestPersonalOtherInfo()
            } else {
                this.setState({
                    phone: params['phoneNumber'] ?? '',
                    contact_addr: params['contactAddr'] ?? '',
                    profession: params['profession'] ?? '',
                    duties: params['duties'] ?? '',
                    fixed_telephone: params['fixedTelephone'] ?? '',
                    zip_code: params['zipCode'] ?? '',
                    email_address: params['emailAddress'] ?? '',
                });
            }
        }

    }

    requestPersonalOtherInfo() {
        getPersonalOtherInfo().then((resp) => {
            if (resp.code === 200) {
                this.setState({
                    phone: resp.data['phoneNumber'],
                    contact_addr: resp.data['contactAddr'],
                    profession: resp.data['profession'],
                    duties: resp.data['duties'],
                    fixed_telephone: resp.data['fixedTelephone'],
                    zip_code: resp.data['zipCode'],
                    email_address: resp.data['emailAddress'],
                });
            }
        })
    }

    requestPersonalCertiInfo() {
        getPersonalCertiInfo(1).then((resp) => {
            if (resp.code === 200) {
                this.setState({ name: resp.data['name'], credCode: resp.data['credCode'] });
            }
        })
    }


    submit() {
        const {
            contact_addr,
            profession,
            duties,
            fixed_telephone,
            zip_code,
            email_address
        } = this.state;

        var params = this.$instance.router?.params
        console.log(params);
        if (params && params['isJG'] === '1') {
            submitPersonalOtherInfo({ contact_addr: contact_addr, profession: profession, duties: duties, fixed_telephone: fixed_telephone, zip_code: zip_code, email_address: email_address }).then((resp) => {
                if (resp.code === 200) {
                    Toast.show('保存成功')
                    Taro.navigateBack()
                }
            })
        } else {
            setWalletPersonalOtherInfo({ contact_addr: contact_addr, profession: profession, duties: duties, fixed_telephone: fixed_telephone, zip_code: zip_code, email_address: email_address }).then((resp) => {
                if (resp.code === 200) {
                    Toast.show('保存成功')
                    // Taro.navigateBack()
                }
            })
        }



    }


    render() {

        const {
            name,
            credCode,
            phone,
            contact_addr,
            profession,
            duties,
            fixed_telephone,
            zip_code,
            email_address,
            isRead
        } = this.state;

        console.log(profession)

        const list = findMapsByFieldName('profession')
        const professions: string[] = [];
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            professions.push(element.dictItemName)
        }


        return (
            <View className='page'>
                <View className='content'>
                    <PdsField name='姓名' data={name ?? ''} disabled placeholder='请输入姓名' onChange={(e) => {
                        console.log(e);
                    }}></PdsField>
                    {/* <PdsFormPicker disabled name='证件类型'  placeholder='请选择证件类型' ></PdsFormPicker> */}
                    <PdsField name='身份证号' data={credCode ?? ''} disabled placeholder='请输入身份证号' onChange={(e) => {
                        console.log(e);
                    }}></PdsField>
                    <PdsField name='手机号码' data={phone ?? ''} disabled placeholder='请输入手机号码' onChange={(e) => {
                        console.log(e);
                    }}></PdsField>
                    <PdsFormPicker name='职业' placeholder='请选择职业类型' disabled={isRead} selectData={profession} data={professions} onChange={(e) => {
                        this.setState({ profession: e })
                    }}></PdsFormPicker>
                    <PdsField name='职务' data={duties ?? ''} placeholder='请输入职务' disabled={isRead} onChange={(e) => {
                        console.log(e);
                        this.setState({ duties: e })
                    }}></PdsField>
                    <PdsField name='电子邮箱' data={email_address ?? ''} placeholder='请输入电子邮箱' disabled={isRead} onChange={(e) => {
                        console.log(e);
                        this.setState({ email_address: e })
                    }}></PdsField>
                    <PdsField name='邮编' data={zip_code ?? ''} placeholder='请输入邮编' disabled={isRead} onChange={(e) => {
                        console.log(e);
                        this.setState({ zip_code: e })
                    }}></PdsField>
                    <PdsField name='座机号码' data={fixed_telephone ?? ''} placeholder='请输入座机号码' disabled={isRead} onChange={(e) => {
                        console.log(e);
                        this.setState({ fixed_telephone: e })
                    }}></PdsField>
                    <PdsField name='住址' data={contact_addr ?? ''} placeholder='请输入住址' disabled={isRead} onChange={(e) => {
                        console.log(e);
                        this.setState({ contact_addr: e })
                    }}></PdsField>

                </View>
                {
                    isRead ? null :
                        <View className='bottom'>
                            <Button onClick={this.submit.bind(this)}>提交</Button>
                        </View>
                }

                <Toast />
            </View>);
    }
}

export default InformationTable;